import { StyleSheet, ScrollView, Alert, Switch } from 'react-native';
import { router } from 'expo-router';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useState } from 'react';

import { Text, View } from '@/components/Themed';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';

export default function PrivacyScreen() {
  const colorScheme = useColorScheme();
  const [privacySettings, setPrivacySettings] = useState({
    biometricAuth: true,
    twoFactorAuth: false,
    dataCollection: true,
    analytics: false,
    crashReports: true,
    locationTracking: false,
  });


  const toggleSetting = (key: keyof typeof privacySettings) => {
    setPrivacySettings(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  const handleSecurityAction = (action: string) => {
    Alert.alert('安全操作', `执行操作: ${action}`, [
      { text: '确定', onPress: () => console.log(action) },
      { text: '取消', style: 'cancel' },
    ]);
  };

  const SecurityItem = ({ 
    icon, 
    title, 
    description, 
    value, 
    onToggle,
    showSwitch = true,
    onPress
  }: {
    icon: string;
    title: string;
    description: string;
    value?: boolean;
    onToggle?: () => void;
    showSwitch?: boolean;
    onPress?: () => void;
  }) => (
    <View style={styles.securityItem}>
      <View style={styles.securityLeft}>
        <FontAwesome 
          name={icon as any} 
          size={20} 
          color={Colors[colorScheme ?? 'light'].text} 
        />
        <View style={styles.securityText}>
          <Text style={styles.securityTitle}>{title}</Text>
          <Text style={styles.securityDescription}>{description}</Text>
        </View>
      </View>
      {showSwitch ? (
        <Switch
          value={value || false}
          onValueChange={onToggle}
          trackColor={{ false: '#767577', true: '#007AFF' }}
          thumbColor={value ? '#fff' : '#f4f3f4'}
        />
      ) : (
        <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
      )}
    </View>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
          {/* 身份验证 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>身份验证</Text>
            <View style={styles.sectionContent}>
              <SecurityItem
                icon="fingerprint"
                title="生物识别登录"
                description="使用指纹或面部识别登录"
                value={privacySettings.biometricAuth}
                onToggle={() => toggleSetting('biometricAuth')}
              />
              
              <SecurityItem
                icon="shield"
                title="双重验证"
                description="启用两步验证增强安全性"
                value={privacySettings.twoFactorAuth}
                onToggle={() => toggleSetting('twoFactorAuth')}
              />
              
              <SecurityItem
                icon="key"
                title="修改密码"
                description="定期更新您的登录密码"
                showSwitch={false}
                onPress={() => handleSecurityAction('修改密码')}
              />
            </View>
          </View>

          {/* 数据隐私 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>数据隐私</Text>
            <View style={styles.sectionContent}>
              <SecurityItem
                icon="database"
                title="数据收集"
                description="允许收集使用数据以改善服务"
                value={privacySettings.dataCollection}
                onToggle={() => toggleSetting('dataCollection')}
              />
              
              <SecurityItem
                icon="bar-chart"
                title="分析数据"
                description="分享匿名使用数据用于分析"
                value={privacySettings.analytics}
                onToggle={() => toggleSetting('analytics')}
              />
              
              <SecurityItem
                icon="bug"
                title="崩溃报告"
                description="自动发送崩溃报告帮助修复问题"
                value={privacySettings.crashReports}
                onToggle={() => toggleSetting('crashReports')}
              />
              
              <SecurityItem
                icon="map-marker"
                title="位置跟踪"
                description="允许应用访问位置信息"
                value={privacySettings.locationTracking}
                onToggle={() => toggleSetting('locationTracking')}
              />
            </View>
          </View>

          {/* 账户安全 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>账户安全</Text>
            <View style={styles.sectionContent}>
              <SecurityItem
                icon="history"
                title="登录历史"
                description="查看最近的登录记录"
                showSwitch={false}
                onPress={() => handleSecurityAction('查看登录历史')}
              />
              
              <SecurityItem
                icon="unlock"
                title="活跃设备"
                description="管理已登录的设备"
                showSwitch={false}
                onPress={() => handleSecurityAction('管理设备')}
              />
              
              <SecurityItem
                icon="trash"
                title="删除账户"
                description="永久删除您的账户和数据"
                showSwitch={false}
                onPress={() => handleSecurityAction('删除账户')}
              />
            </View>
          </View>

          {/* 隐私政策 */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>法律信息</Text>
            <View style={styles.sectionContent}>
              <SecurityItem
                icon="file-text"
                title="隐私政策"
                description="查看我们的隐私政策"
                showSwitch={false}
                onPress={() => handleSecurityAction('查看隐私政策')}
              />
              
              <SecurityItem
                icon="gavel"
                title="服务条款"
                description="查看服务使用条款"
                showSwitch={false}
                onPress={() => handleSecurityAction('查看服务条款')}
              />
              
              <SecurityItem
                icon="download"
                title="导出数据"
                description="下载您的个人数据"
                showSwitch={false}
                onPress={() => handleSecurityAction('导出数据')}
              />
            </View>
          </View>
        </View>
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  sectionContent: {
    backgroundColor: 'white',
    borderRadius: 8,
    overflow: 'hidden',
  },
  securityItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  securityLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  securityText: {
    marginLeft: 12,
    flex: 1,
  },
  securityTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 2,
  },
  securityDescription: {
    fontSize: 14,
    color: '#666',
  },
});
